<template>
    <div id="login">
        <div class="bodybg"><img style="display: block;" src="/images/dl_bg.png"></div>
        <el-button :icon="ArrowLeft" style="position: fixed;left: 23px;top: 15px;z-index: 999;" class="m_elbtn"
            @click="$router.replace('/fstpage')">系统首页</el-button>
        <img style="width: 32%;position: fixed;top: 10%;left: 50%;transform: translate(-50%,0);"
            src="/images/dl_logo.png" alt="">
        <div class="login_ck">
            <div style="text-align: center;color: white;font-size: 26px;margin-top: 20px;">
                用户登陆
            </div>
            <div class="inp_center">
                <div class="inpwk">
                    <el-input v-model="userobj.code" class="w_wh" placeholder="请输入账号" :prefix-icon="User" />
                </div>
                <div class="inpwk">
                    <el-input v-model="userobj.password" type="password" class="w_wh" placeholder="请输入密码"
                        :prefix-icon="Lock" />
                </div>

                <div class="zhongj inpwk">
                    <el-input v-model="userobj.captcha" class="w_wh zhongjx1" placeholder="验证码（点击图片换一张）" />

                    <img style="cursor: pointer;" :src="base64" @click="getcaptcha()">
                    <div class="clear"></div>
                </div>
                <div class="login_four_input" style="margin-top: 5px;">
                    <el-checkbox v-model="checked" label="记住密码" size="large" />
                </div>
                <el-button color="#154E9D" class="login_anni" @click="login()">登录</el-button>
            </div>
        </div>
        <div class="dibu">人口与城镇化地理信息系统 &nbsp; <asp:Label ID="m_count" runat="server" Text="本站访客人次"></asp:Label><br>
            建设单位：河南省统计局 &nbsp; 技术支持：<a href="http://www.henangis.com/" target="_blank" class="jglj">郑州景观地理空间信息研究院</a>
            &nbsp;
            系统备案号：豫ICP15034188号-3
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { User, Lock } from '@element-plus/icons-vue';
import { ArrowLeft } from '@element-plus/icons-vue';
import $sys from '../api/sys';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { dataStore } from '../store/data';
const $store = dataStore();
const checked = ref(false); 
const $router = useRouter();
const base64 = ref('');
const checkcode = ref('');
const userobj = reactive({});
onMounted(() => {
    getcaptcha();
});
if (userobj.code = localStorage.getItem("userName")) {
    userobj.code = localStorage.getItem("userName");
    userobj.password = localStorage.getItem("password");
    checked.value = true;
}
document.onkeydown = (e) => {
    if (e.keyCode === 13 && location.href.indexOf("login") !== -1) {
        login();
    }
};
function login() {
    if (checkobj()) {
        userobj.verification_check_code = checkcode.value;
        $sys.login(userobj).then(res => {
            if (res.code == 200) {
                ElMessage({
                    type: "success",
                    message: "登录成功！",
                });
                localStorage.setItem("token", res.data.token);
                localStorage.setItem('usernm', res.data.name);
                localStorage.setItem('grade', res.data.grade);
                localStorage.setItem('code', res.data.code);

                if (checked.value) {
                    localStorage.setItem("userName", userobj.code);
                    localStorage.setItem("password", userobj.password);

                } else {
                    localStorage.removeItem("userName");
                    localStorage.removeItem("password");
                }
                $store.loginflag = !$store.loginflag;
                if (userobj.password == 'HNrk@1234') {
                    ElMessageBox.alert(
                        '您当前密码为初始密码,请尽快修改密码!',
                        '警告',
                        {
                            confirmButtonText: '确定',
                            callback: () => {
                                $router.push({
                                    name: 'changePWD'
                                });
                            }
                        }
                    )
                } else {
                    if (res.data.grade >= 4) {
                        $router.push({
                            name: 'cwh'
                        });
                    } else {
                        $router.push({
                            name: 'plotmap'
                        });
                    }
                }

            } else {
                ElMessage({
                    message: res.message,
                    type: 'warning',
                });
                userobj.captcha = '';
                getcaptcha();
            }
        }).catch(err => {
            ElMessage({
                message: err.data.message,
                type: 'warning',
            });
        });
    }
}
function checkobj() {
    let flag = false;
    if (userobj.code == '' || !userobj.code) {
        ElMessage({
            message: '请输入账号!',
            type: 'warning',
        });
    } else if (userobj.password == '' || !userobj.password) {
        ElMessage({
            message: '请输入密码!',
            type: 'warning',
        });
    } else if (userobj.captcha == '' || !userobj.captcha) {
        ElMessage({
            message: '请输入验证码!',
            type: 'warning',
        });
    } else {
        flag = true;
    }
    return flag;
}
function getcaptcha() {
    $sys.getcaptcha().then(res => {
        if (res.code == 200) {
            base64.value = 'data:image/png;base64,' + res.data.captchaBase64;
            checkcode.value = res.data.verification_check_code;
        }
    });
}
</script>
<style lang="less">
#login {
    height: 100%;
    overflow: hidden;

    .m_elbtn {
        background-color: #001547;
        color: #019CEE;
        border: 1px solid #019CEE;
    }

    .dibu {
        width: 100%;
        position: fixed;
        bottom: 30px;
        // background: url(../images/dbbg.png) repeat-x;
        height: 88px;
        text-align: center;
        padding-top: 24px;
        line-height: 36px;
        font-size: 14px;
        color: #ccc !important;
    }

    .jglj {
        color: #ccc !important;
    }

    .dibu a {
        // color: #fff;
        text-decoration: none;
    }

    .dibu .jglj:hover {
        // color: #fff;
        text-decoration: underline;
    }
}

.login_ck {
    .el-input__wrapper {
        background: none !important;
        height: 40px;
        box-shadow: 0 0 0 1px #31415F !important;
    }

    .el-input__inner {
        color: white !important;
    }

    .el-checkbox.el-checkbox--large .el-checkbox__label {
        color: #2F5282;
    }

    ::placeholder {
        color: #2F5282;
    }

    .el-icon {
        color: #2F5282 !important;
    }
}
</style>
<style scoped lang="less">
body {
    position: relative;
}

.bodybg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
}

.bodybg img {
    width: 100%;
    height: 100%;
}

.clear {
    clear: both;
}

img {
    display: inline;
}

.login_ck {
    margin: 0 auto;
    width: 514px;
    height: 403px;
    border-radius: 10px;
    /* background: url(../img/k_bg.png); */
    background-color: rgba(4, 24, 60, .7);
    border: 1px solid #004899;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

.login_ck .imgh {
    padding-top: 25px;
    padding-bottom: 20px;
    border-bottom: 1px #56648b solid;
    text-align: center;
    margin-bottom: 24px;
}


.el-icon svg {
    font-size: 16px
}

.w_wh {
    margin: 0 auto;
    font-size: 16px;
}

.inp_center {
    width: 70%;
    margin: 0 auto;
}

.inpwk {
    margin-top: 34px;
}

.zhongj {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.zhongjx1 {
    width: 60%;
    margin-left: 0;
}

.w_wh {
    height: 40px;
}

.login_anni {
    width: 100%;
    height: 40px;
    margin-top: 5px;
}
</style>
<style></style>